<template>
  <div style="padding-top: 16px;">
    <z-button @click="toastTop">上方弹出</z-button>
    <p>
      <strong>代码</strong>
    </p>
    <pre><code>{{content}}</code></pre>
  </div>
</template>
<script>
  import {toastPlugin, zButton} from '../../../src/main'
  import Vue from 'vue'
  Vue.use(toastPlugin)

  export default {
    data() {
      return {
        content: `
          <z-button @click="toastTop">上方弹出</z-button>

          toastTop() {
          this.$toast('<div style="color:red">我是红色的</div>', { position: 'middle', enableHtml: true, closeButton: {
              callback: () => {
                this.$toast('Hellow World')
              },
              text: '知道'
            } })
          }
      `.replace(/^ {8}/gm, '').trim()
      }
    },
    methods: {
      toastTop() {
        this.$toast('<div style="color:red">我是红色的</div>', { position: 'top', enableHtml: true, closeButton: {
          callback: () => {
            this.$toast('Hellow World')
          },
          text: '知道'
        } })
      }
    },
    components: {zButton},
  }
</script>